<template>
  <div class="demo">
    <div class="demo-title">带 icon 的滑块</div>
    <div class="demo-content">
      <FrownOutlined :style="{ color: preColor }" />
      <Slider v-model:value="sliderValue" :min="0" :max="20" />
      <SmileOutlined :style="{ color: nextColor }" />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { computed, ref } from 'vue';
  import { FrownOutlined, SmileOutlined } from '@ant-design/icons-vue';
  import Slider from '@sscd/slider';
  const sliderValue = ref<number>(0);
  const min = ref<number>(0);
  const max = ref<number>(20);
  const preColor = computed(() => {
    const mid = +((max.value - min.value) / 2).toFixed(5);
    return sliderValue.value >= mid ? '' : 'rgba(0, 0, 0, .45)';
  });
  const nextColor = computed(() => {
    const mid = +((max.value - min.value) / 2).toFixed(5);
    return sliderValue.value >= mid ? 'rgba(0, 0, 0, .45)' : '';
  });
</script>

<style lang="less" scoped>
  .demo-content {
    position: relative;
    padding: 0px 30px;
    .anticon {
      position: absolute;
      top: -2px;
      width: 16px;
      height: 16px;
      line-height: 1;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.25);
      &:first-child {
        left: 0;
      }
      &:last-child {
        right: 0;
      }
    }
  }
</style>
